<template>
  <div class="header">
    <span class="txt">全选/反选</span>
    <input type="checkbox" name="" id="" class="ck" v-model="allCheck" />
    <button class="btn" @click="delItems">删除 {{ ck_num }} 封</button>
  </div>
</template>

<script setup>
import mitts from "../bus";
import { usedelItemsHook } from "./Hooks/useDelItemsHooks";
const { delItems } = usedelItemsHook()
const list = ref([]);
mitts.on("giveList", (e) => {
  list.value = e;
});
const ck_num = computed(() => {
  return list.value.reduce((sum, item) => {
    if (item.isSelected) {
      return sum + 1;
    }
    return sum;
  }, 0);
});
const allCheck = computed({
  get() {
    return list.value.every((item) => item.isSelected === true);
  },
  set(val) {
    return list.value.forEach((item) => (item.isSelected = val));
  },
});
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  .txt {
    margin-right: 5px;
    font-weight: 700;
  }
  .ck {
    margin-right: 5px;
  }
  .btn {
    border: 2px solid #000;
    padding-block: 2px;
    padding-inline: 4px;
    background-color: #ff4051;
    font-size: 12px;
  }
}
</style>
